<template>
  <keep-alive>
    <el-row style="background:#fff;margin-bottom:12px;">
      <el-card :body-style="{ padding: '10px' }">
        <el-col :span="24">
          <span style="font-size:180%;margin-left:20px;color:red;"> {{ examInfo.exam_name }} </span>
          <el-divider direction="vertical" />
          <span style="font-size: 80%;"> 考试日期: {{ examInfo.date }} </span>
        </el-col>

        <el-col :span="24">
          <el-divider />
        </el-col>

        <el-col :span="4" class="fit-col" style="min-width:280px;">
          <el-row :gutter="10" type="flex" justify="center">
            <el-col :span="2" class="fit-col fit-span" style="text-align:right">
              <span>学年</span>
            </el-col>
            <el-col :span="18" style="min-width:220px;">
              <el-select v-model="selectedGradeYear" size="small" placeholder="学年">
                <el-option
                  v-for="item in gradeYearList"
                  :key="item.name"
                  :label="item.name"
                  :value="item.name"
                />
              </el-select>
            </el-col>
          </el-row>
        </el-col>

        <el-col :span="4" class="fit-col" style="min-width:180px;">
          <el-row :gutter="10" type="flex" justify="center">
            <el-col :span="2" class="fit-col fit-span" style="text-align:right">
              <span>年级</span>
            </el-col>
            <el-col :span="18" style="min-width:120px;">
              <el-select v-model="selectedGrade" size="small" placeholder="年级">
                <el-option
                  v-for="item in gradeList"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                />
              </el-select>
            </el-col>
          </el-row>
        </el-col>

        <el-col :span="4" class="fit-col" style="min-width:300px;">
          <el-row :gutter="10" type="flex" justify="center">
            <el-col :span="2" class="fit-col fit-span" style="text-align:right">
              <span>考试</span>
            </el-col>
            <el-col :span="22" style="min-width:230px;">
              <el-select v-model="selectedExam" size="small" placeholder="考试">
                <el-option
                  v-for="item in examList"
                  :key="item.id"
                  :label="item.exam_name"
                  :value="item.id"
                />
              </el-select>
            </el-col>
          </el-row>
        </el-col>

        <el-col :span="3" class="fit-col">
          <el-button
            style="margin-left: 12px;"
            type="success"
            size="small"
            icon="el-icon-search"
            @click.native="handleFilter"
          >搜索</el-button>
        </el-col>

      </el-card>
    </el-row>
  </keep-alive>
</template>

<script>
import { getCheckedUnionExamId, getCheckedUnionExamGradeId, getCheckedUnionExamGradeYear } from '@/utils/unionExamInfo'
import { getUnionExam, getExamStatistics } from '@/api/union_exam'
import { getGradeByPerms, getGradeYear } from '@/api/school'

export default {
  name: 'ExamInfo',
  data() {
    return {
      examInfo: {},
      gradeList: [],
      gradeYearList: [], // 下拉框学年列表
      selectedGradeYear: '',
      selectedGrade: '',
      checkedExamId: '',
      checkedGradeId: '',
      examList: [],
      selectedExam: '',
      selectedExamTmp: ''
    }
  },
  watch: {
    selectedGradeYear(newValue, oldValue) {
      if (oldValue) {
        this.selectedExam = ''
        this.getGradeList1()
      }
    },
    selectedGrade(newValue, oldValue) {
      if (oldValue !== '') {
        this.selectedExam = ''
        this.getExam1()
      }
    },
    selectedExamTmp(newValue, oldValue) {
      if (oldValue !== '') {
        this.getExamInfo()
      }
    }
  },
  created() {
    this.selectedGradeYear = getCheckedUnionExamGradeYear()
    this.checkedExamId = getCheckedUnionExamId()
    this.checkedGradeId = getCheckedUnionExamGradeId()
    if (this.selectedGradeYear && this.checkedGradeId && this.checkedExamId) {
      this.hadExam()
    } else {
      this.init()
    }
  },
  methods: {
    async init() {
      console.log('init')
      await this.getGradeYear()
      await this.getGradeList1()
      await this.getExam1()
      await this.getExamInfo()
      this.$store.dispatch('user/setUnionExamGradeYear', this.selectedGradeYear)
      this.$store.dispatch('user/setCheckedUnionExamGradeId', this.selectedGrade)
      this.$store.dispatch('user/setCheckedUnionExamId', this.selectedExam)
      this.$emit('func', this.selectedExam, this.selectedGrade)
    },
    async hadExam() {
      console.log('had exam')
      await this.getGradeYear()
      await this.getGradeList()
      await this.getExam()
      await this.getExamInfo()
      this.$emit('func', this.selectedExam, this.selectedGrade)
    },

    // 获取所有学年
    async getGradeYear() {
      const response = await getGradeYear()
      this.gradeYearList = response.all_start_and_end_year
      if (!this.selectedGradeYear) {
        this.selectedGradeYear = response.now_start_and_end_year
      }
    },

    // 获取有权限查看的年级
    async getGradeList() {
      const query = { start_and_end_year: this.selectedGradeYear }
      const response = await getGradeByPerms(query)
      this.gradeList = response
      if (this.gradeList.length > 0) {
        this.selectedGrade = Number(this.checkedGradeId)
      }
    },

    // 获取有权限查看的年级
    async getGradeList1() {
      const query = { start_and_end_year: this.selectedGradeYear }
      const response = await getGradeByPerms(query)
      this.gradeList = response
      if (this.gradeList.length > 0) {
        this.selectedGrade = this.gradeList[0].id
      }
    },

    // 根据年级获取该年级的考试
    async getExam() {
      const query = { 'grade': this.selectedGrade, 'status': '已分析' }
      const response = await getUnionExam(query)
      this.examList = response
      if (this.examList.length > 0) {
        this.selectedExam = Number(this.checkedExamId)
      } else {
        this.$message.error('没有可以查看的考试')
      }
    },

    // 根据年级获取该年级的考试
    async getExam1() {
      const query = { 'grade': this.selectedGrade, 'status': '已分析' }
      const response = await getUnionExam(query)
      this.examList = response
      if (this.examList.length > 0) {
        this.selectedExam = this.examList[0].id
      } else {
        this.$message.error('没有可以查看的考试')
      }
    },

    // 获取该次考试的统计信息
    async getExamInfo() {
      if (this.selectedExam) {
        const response = await getExamStatistics(this.selectedExam)
        this.examInfo = response
      }
    },

    // 搜索事件
    handleFilter() {
      this.getExamInfo()
      this.$store.dispatch('user/setUnionExamGradeYear', this.selectedGradeYear)
      this.$store.dispatch('user/setCheckedUnionExamGradeId', this.selectedGrade)
      this.$store.dispatch('user/setCheckedUnionExamId', this.selectedExam)
      this.$emit('func', this.selectedExam, this.selectedGrade)
    }
  }
}
</script>

<style scoped>
.el-divider--horizontal {
  margin: 20px 0 10px 0;
}

.fit-col {
  margin-top: 10px;
  margin-bottom: 10px;
}

.fit-span {
  font-size: 14px;
  font-weight: 700;
  color: #606266;
  min-width: 60px;
}

.fit-input {
  min-width: 80px;
}
</style>
